<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Page Title -->
    <title>Homepage | Spyre - Slick contemporary multipurpose theme</title>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="../assets/img/favicons/site.webmanifest">
    <link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#f23838">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Vendor Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700%7CRoboto:300,400,700" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.css" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/aos/dist/aos.css" rel="stylesheet">

    <!-- Theme Stylesheets -->
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/dist/css/theme.min.css" rel="stylesheet">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129313359-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-129313359-1');
    </script>
</head>

<body>
<!-- Preloader -->
<div class="preloader">
    <div class="spinner">
        <div class="circles"></div>
    </div>
</div>
<!-- End of Preloader -->


<!-- Header -->
<header class="spyre-navbar navbar navbar-expand-lg bg-secondary fixed-top align-items-center" data-transparent data-text-color="#ffffff">
    <div class="container">
        <a class="navbar-brand mr-lg-5 mr-xl-7" href="index.html">
            <img src="../assets/img/logo.svg" class="d-none d-lg-block" alt="Spyre" width="183" />
            <img src="../assets/img/logo.svg" class="d-block d-lg-none" alt="Spyre" width="150" />
        </a>

        <span class="navbar-text flex-fill d-none d-md-inline-block">
                    Contact us: <a href="#" class="pl-2">info@spyre.com</a><a href="#" class="pl-5">+1-202-555-0149</a>
                </span>

        <div class="search d-none d-lg-flex justify-content-end ml-auto mr-2">
            <input class="form-control mr-2" type="text">
            <i class="zmdi zmdi-search"></i>
        </div>

        <div class="menu-toggle">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="cross">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- Spyrenav Overlay -->
    <div class="spyre-navbar-overlay overlay-slide">
        <div class="container">
            <div class="row">
                <div class="spyre-navbar-nav-container col-md-6 col-lg-5 col-xl-4 bg-white ext-l">
                    <nav class="spyre-navbar-nav">
                        <ul class="spyre-nav">
                            <li class="spyre-nav-item"><a href="index.html" class="spyre-nav-link">Overview</a></li>
                            <li class="spyre-nav-item dropdown">
                                <a href="#" class="spyre-nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li class="dropdown-menu-item active"><a href="home.html" class="dropdown-menu-link">Homepage</a></li>
                                    <li class="dropdown-menu-item"><a href="services.html" class="dropdown-menu-link">Services</a></li>
                                    <li class="dropdown-menu-item"><a href="blog.html" class="dropdown-menu-link">Blog</a></li>
                                    <li class="dropdown-menu-item"><a href="blog-single.html" class="dropdown-menu-link">Blog single</a></li>
                                    <li class="dropdown-menu-item"><a href="portfolio.html" class="dropdown-menu-link">Portfolio</a></li>
                                    <li class="dropdown-menu-item"><a href="about.html" class="dropdown-menu-link">About</a></li>
                                    <li class="dropdown-menu-item"><a href="contact.html" class="dropdown-menu-link">Contact</a></li>
                                    <li class="dropdown-menu-item"><a href="team.html" class="dropdown-menu-link">Team</a></li>
                                    <li class="dropdown-menu-item"><a href="faq.html" class="dropdown-menu-link">Faq</a></li>
                                    <li class="dropdown-menu-item"><a href="pricing.html" class="dropdown-menu-link">Pricing</a></li>
                                    <li class="dropdown-menu-item"><a href="careers.html" class="dropdown-menu-link">Careers</a></li>
                                    <li class="dropdown-menu-item"><a href="careers-single.html" class="dropdown-menu-link">Careers single</a></li>
                                    <li class="dropdown-menu-item"><a href="coming-soon.html" class="dropdown-menu-link">Coming soon</a></li>
                                    <li class="dropdown-menu-item"><a href="404.html" class="dropdown-menu-link">404</a></li>
                                    <li class="dropdown-menu-item"><a href="sign-in.html" class="dropdown-menu-link">Sign In</a></li>
                                    <li class="dropdown-menu-item"><a href="sign-up.html" class="dropdown-menu-link">Sing Up</a></li>
                                    <li class="dropdown-menu-item"><a href="recover-account.html" class="dropdown-menu-link">Recover account</a></li>
                                </ul>
                            </li>
                            <li class="spyre-nav-item"><a href="https://spyre-theme.bitbucket.io/v1.2.0/docs/animations.html" class="spyre-nav-link">Components</a></li>
                            <li class="spyre-nav-item"><a href="../docs/index.html" class="spyre-nav-link">Docs</a></li>
                            <li class="spyre-nav-item"><a href="https://themes.getbootstrap.com/product/spyre-slick-contemporary-multipurpose-theme" target="_blank" class="spyre-nav-link">Purchase</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="col-lg-7 col-xl-8 d-none d-md-block">
                    <div class="d-flex flex-column h-100">
                        <div class="d-flex h-100">
                            <div class="align-self-center">
                                <div class="text-uppercase"
                                     data-background-text="communication"
                                     data-color="#7079a2"
                                     data-opacity="0.02"
                                     data-font-size="85px"
                                     data-font-weight="500"
                                     data-offset-x="-5%"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="planning"
                                     data-color="#7079a2"
                                     data-opacity="0.04"
                                     data-font-size="175px"
                                     data-font-weight="500"
                                     data-offset-x="29%"
                                     data-padding="7vh 0 2vh 0"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="delivering"
                                     data-color="#7079a2"
                                     data-opacity="0.03"
                                     data-font-size="140px"
                                     data-font-weight="500"
                                     data-offset-x="15%"
                                     data-letter-spacing="5px"
                                ></div>
                            </div>
                        </div>

                        <div class="mt-auto">
                            <ul class="nav flex-nowrap float-right">
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-twitter text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-instagram text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-facebook-box text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-pinterest text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-flickr text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-youtube text-white"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Spyrenav Overlay -->
</header>
<!-- End of Header -->


<!-- Main Content -->
<main class="main minh-100vh">
    <!-- Section -->
    <section class="py-0">
        <div class="container">
            <div class="row position-relative">
                <div class="col-lg-8 minh-100vh col-xl-7 bg-white pt-10 pt-lg-7 pb-6 pb-lg-3">
                    <div class="row align-items-center h-100">
                        <div class="col-lg-10 pb-3">
                            <h1 class="fs-3 fs-lg-5 title-underline mb-5 pb-3">We deliver <span class="typed text-primary" data-typed-text="design&lt;span class='text-secondary'&gt;,&lt;/span&gt;###quality&lt;span class='text-secondary'&gt;,&lt;/span&gt;###inspiration&lt;span class='text-secondary'&gt;,&lt;/span&gt;" data-typed-loop="false">design<span class="text-secondary">,</span></span> <br />right into your business.</h1>
                            <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum varius mi non finibus. Quisque dignissim sit amet libero ac egestas.</p>

                            <div class="row justify-content-center justify-content-lg-start">
                                <div class="col-8 col-lg-5">
                                    <a href="#" class="btn btn-primary btn-lg btn-block mb-2">Get in touch</a>
                                </div>
                                <div class="col-8 col-lg-5">
                                    <a href="#" class="btn btn-secondary btn-lg btn-block mb-2">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-xl-5 bg-secondary ext-r pt-0 pt-lg-7 pb-1 pb-lg-3">
                    <div class="d-flex h-100 align-items-center ml-lg-neg-7 release-container unrelease-lg-container">
                        <!-- Carousel -->
                        <div class="owl-carousel" data-carousel-options='{"items":1,"loop":true,"responsive":{"0":{"dots":true,"nav":false},"992":{"dots":false,"nav":true}}}'>
                            <div><img src="../assets/img/img-01.jpg" class="img-fluid w-100" alt="" /></div>
                            <div><img src="../assets/img/img-02.jpg" class="img-fluid w-100" alt="" /></div>
                            <div><img src="../assets/img/img-03.jpg" class="img-fluid w-100" alt="" /></div>
                            <div><img src="../assets/img/img-04.jpg" class="img-fluid w-100" alt="" /></div>
                            <div><img src="../assets/img/img-05.jpg" class="img-fluid w-100" alt="" /></div>
                        </div>
                        <!-- End of Carousel -->
                    </div>
                </div>

                <div class="move d-none d-lg-block">
                    <a href="#section-2" data-smooth-scroll data-smooth-scroll-hash="false">
                        <i class="zmdi zmdi-long-arrow-down zmdi-hc-2x"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section id="section-2">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="row">
                        <div class="col-md-6 col-lg-4 pr-lg-5">
                            <h2 class="mb-4 fs-1 fw-medium text-uppercase"><span class="fs-2 pr-2 text-primary position-relative top-2">01</span>Communication</h2>
                            <p class="fs--1">Proin venttdio nunc, id fringilla augue luctus et. Mauris condimentum vehicula magna a vehicula. Cras ornare, ligula id semper fringilla, ex turpis aliquet ex, et maximus metus turpis a orci.</p>
                        </div>
                        <div class="col-md-6 col-lg-4 px-lg-5 border-left-centered-40 border-left-centered-faded">
                            <h2 class="mb-4 fs-1 fw-medium text-uppercase"><span class="fs-2 pr-2 text-primary position-relative top-2">02</span>Planning</h2>
                            <p class="fs--1">Etiam sed ultrices arcu, eu ornare purus. Morbi lobortis bibendum aliquam. Fusce eget est urna. Etiam malesuada neque at eros elementum, eu laoreet.</p>
                        </div>
                        <div class="col-md-6 col-lg-4 pl-lg-5 border-left-centered-40 border-left-centered-faded">
                            <h2 class="mb-4 fs-1 fw-medium text-uppercase"><span class="fs-2 pr-2 text-primary position-relative top-2">03</span>Delivering</h2>
                            <p class="fs--1">Vestibulum id lacus sed odio hendrerit vulputate porta vitae ex. Fusce facilisis libero vitae leo efficitur, quis semper nisi pretium. Nam e turpis egestas dolor semper vulputate convallis lectus.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="pt-0">
        <div class="container-fluid px-xl-0">
            <div class="row align-items-center">
                <div class="col-lg-6 align-self-stretch py-6 py-lg-9">
                    <div class="bg-container overlay overlay-primary-90" style="background-image: url(../assets/img/img-06.jpg);"></div>
                    <div class="position-relative">
                        <div class="px-sm-6 px-lg-8 px-xl-10">
                            <h3 class="my-0 fs-1 fw-medium text-uppercase">We can help</h3>
                            <h2 class="mb-4 fw-medium text-white text-uppercase">Services</h2>
                            <p class="mb-0 fs--1 text-white">Sed facilisis blandit diam ut commodo. Duis consequat justo eu eros varius, non interdum purus sagittis. Integer imperdiet justo vulputate lectus mattis fringilla. Maecenas arcu turpis, imperdiet porttitor consectetur condimentum, pretium eget ante. Aenean mattis mauris leo, ac pretium justo viverra in. In sit amet malesuada purus.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 px-sm-8 px-ld-9 px-xl-12 pt-6 pb-4 py-lg-10 py-xl-8 align-self-stretch">
                    <h3 class="my-0 mb-4 fs-1 fw-bold text-uppercase"><i class="zmdi zmdi-sun mr-2"></i>Core Services</h3>
                    <ul class="list-unstyled mb-5">
                        <li class="mb-1"><span class="h6 text-primary fw-bold mr-3">01</span>Strategy</li>
                        <li class="mb-1"><span class="h6 text-primary fw-bold mr-3">02</span>Advisory Consulting</li>
                        <li class="mb-1"><span class="h6 text-primary fw-bold mr-3">02</span>Managed Services</li>
                        <li class="mb-1"><span class="h6 text-primary fw-bold mr-3">02</span>Concept Developemnt</li>
                        <li class="mb-1"><span class="h6 text-primary fw-bold mr-3">05</span>Business</li>
                    </ul>
                    <a href="#" class="h6 fw-bold text-uppercase text-primary float-right float-lg-left">View more<i class="zmdi zmdi-chevron-right pl-4"></i></a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="pt-0">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3 class="my-0 fs-1 fw-medium text-primary text-uppercase">Our</h3>
                    <h2 class="mb-5 fw-medium text-secondary text-uppercase">Clients</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="bg-light p-3 d-flex square" data-aos="flip-left" data-aos-duration="1000">
                        <img src="../assets/img/clients/logo-01.png" alt="" width="130" class="img-fluid d-flex align-self-center mx-auto" />
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="bg-light p-3 d-flex square" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="50">
                        <img src="../assets/img/clients/logo-02.png" alt="" width="120" class="img-fluid d-flex align-self-center mx-auto" />
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="bg-light p-3 d-flex square" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="100">
                        <img src="../assets/img/clients/logo-03.png" alt="" width="113" class="img-fluid d-flex align-self-center mx-auto" />
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="bg-light p-3 d-flex square" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="150">
                        <img src="../assets/img/clients/logo-04.png" alt="" width="125" class="img-fluid d-flex align-self-center mx-auto" />
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="bg-light p-3 d-flex square" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="200">
                        <img src="../assets/img/clients/logo-05.png" alt="" width="110" class="img-fluid d-flex align-self-center mx-auto" />
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="bg-light p-3 d-flex square" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="250">
                        <img src="../assets/img/clients/logo-06.png" alt="" width="57" class="img-fluid d-flex align-self-center mx-auto" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="py-8 py-md-11 overflow-hidden">
        <div class="bg-container parallax" data-rellax-percentage="0.5" style="background-image: url(../assets/img/backgrounds/bg-03.jpg);"></div>
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <a data-fancybox href="https://vimeo.com/282873577" class="icon mx-auto align-items-center text"><i class="zmdi zmdi-play zmdi-hc-4x"></i></a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3 class="my-0 fs-1 fw-medium text-primary text-uppercase">Latest</h3>
                    <h2 class="mb-5 fw-medium text-secondary text-uppercase">Projects</h2>
                </div>
            </div>
        </div>

        <!-- Carousel -->
        <div class="owl-carousel carousel-nav-inside-container carousel-nav-primary" data-carousel-options='{"margin":30,"nav":true,"center":true,"loop":true,"dots":false,"autoWidth":true,"stagePadding":170,"lazyLoad":true,"responsive":{"0":{"items":1},"576":{"items":3},"992":{"items":5}}}'>
            <div><img class="owl-lazy" data-src="../assets/img/img-07.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-08.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-09.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-10.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-11.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-12.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-13.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-14.jpg" style="width: 340px;" alt="" /></div>
            <div><img class="owl-lazy" data-src="../assets/img/img-15.jpg" style="width: 340px;" alt="" /></div>
        </div>
        <!-- End of Carousel -->
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="pt-7 pb-0 bg-blue-light">
        <div class="container">
            <!-- Carousel -->
            <div class="owl-carousel pb-6 px-lg-8 px-xl-12" data-carousel-options='{"margin":30,"nav":true,"items":1,"loop":true,"dots":false}'>
                <div class="row justify-content-center">
                    <div class="col-6 col-lg-3">
                        <img src="../assets/img/profiles/profile-09.jpg" alt="" class="img-fluid w-100 rounded-circle" />
                    </div>
                    <div class="col-lg-9">
                        <blockquote class="blockquote" data-aos="zoom-out-up">
                            <p>Praesent pulvinar tortor vitae sem semper aliquet. Nam finibus libero et sollicitudin convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at nibh facilisis, mollis libero a, suscipit nisi. Morbi sed gravida tortor.</p>
                            <footer class="blockquote-footer text-right"><span class="h5 text-primary fw-medium">Benjamin Parker</span><br/>Brookfield, CEO</footer>
                        </blockquote>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-6 col-lg-3">
                        <img src="../assets/img/profiles/profile-10.jpg" alt="" class="img-fluid w-100 rounded-circle" />
                    </div>
                    <div class="col-lg-9">
                        <blockquote class="blockquote">
                            <p>Integer sagittis mauris massa, at dignissim est ullamcorper eu. Sed egestas lacus ut maximus semper. Duis sed velit tristique, rutrum quam nec, laoreet libero. Pellentesque laoreet laoreet rutrum. Cras sed facilisis dolor. Integer blandit, est bibendum ornare.</p>
                            <footer class="blockquote-footer text-right"><span class="h5 text-primary fw-medium">Lawrence Wilson</span><br/>Westfield, Business Manager</footer>
                        </blockquote>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-6 col-lg-3">
                        <img src="../assets/img/profiles/profile-11.jpg" alt="" class="img-fluid w-100 rounded-circle" />
                    </div>
                    <div class="col-lg-9">
                        <blockquote class="blockquote">
                            <p>Suspendisse quis ex imperdiet, consectetur justo gravida, convallis odio. Phasellus tempor non ligula non facilisis. Maecenas vel massa nec tortor vulputate auctor. Suspendisse et neque sit amet nisi facilisis tempus in non tellus. Duis nec massa purus.</p>
                            <footer class="blockquote-footer text-right"><span class="h5 text-primary fw-medium">Austin Cooper</span><br/>GGP, CEO</footer>
                        </blockquote>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-6 col-lg-3">
                        <img src="../assets/img/profiles/profile-12.jpg" alt="" class="img-fluid w-100 rounded-circle" />
                    </div>
                    <div class="col-lg-9">
                        <blockquote class="blockquote">
                            <p>Nam pulvinar sapien nec enim vestibulum, vitae porta arcu mollis. Nam vulputate porttitor neque. Ut placerat eros quam, a congue eros efficitur sed. Fusce laoreet dui et dui congue aliquam. Suspendisse lacus libero, gravida sed massa ac, interdum efficitur lectus.</p>
                            <footer class="blockquote-footer text-right"><span class="h5 text-primary fw-medium">Doris Bishop</span><br/>AvalonBay, CEO</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
            <!-- End of Carousel -->
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7">
                    <h3 class="my-0 fs-1 fw-medium text-primary text-uppercase">Subscribe</h3>
                    <h2 class="mb-5 fw-medium text-secondary text-uppercase">Newsletter</h2>
                    <p class="mb-4">Cras dapibus erat ex, sed efficitur ligula interdum ut.</p>

                    <form class="form">
                        <div class="form-group mb-1">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <input type="text" class="form-control mb-3 mb-lg-2" placeholder="Email address">
                                </div>
                                <div class="col-8 col-lg-4">
                                    <button type="button" class="btn btn-primary btn-block">Subscribe<i class="zmdi zmdi-mail-send ml-2"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->
</main>
<!-- End of Main Content -->


<!-- Footer -->
<footer class="footer text-white" style="background-image: url(../assets/img/footer-bg.jpg)">
    <div class="container d-flex h-100">
        <div class="row flex-grow-1">
            <div class="col-lg-3 pt-3 ext-l bg-secondary text-center text-lg-left">
                <div class="d-flex flex-column h-100">
                    <div class="pt-5 pt-lg-8 pb-4">
                        <img src="../assets/img/logo-small.svg" alt="" width="92" class="mb-4" />
                        <p class="mb-4 mt-3 fs--1">New York, NY<br />
                            62 Birchpond St.<br />
                            Crystal Lake, NY 11762</p>

                        <p class="fs--1"><a href="#" class="text-white"><i class="zmdi zmdi-phone zmdi-hc-fw mr-1"></i>+1-202-555-0149</a><br />
                            <a href="#" class="text-white"><i class="zmdi zmdi-email zmdi-hc-fw mr-1"></i>info@spyre.com</a></p>
                    </div>

                    <ul class="mt-4 mt-lg-auto mb-5 mb-lg-0 list-unstyled list-inline">
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-twitter text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-instagram text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-facebook-box text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-pinterest text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-flickr text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-youtube text-white"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col d-flex flex-column mb-2 mt-3 pl-lg-7">
                <div class="row pt-5 pt-lg-8 pb-4 pb-lg-6">
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">Services</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">Design</a></li>
                            <li class="my-1"><a href="#" class="text-white">Development</a></li>
                            <li class="my-1"><a href="#" class="text-white">Themes</a></li>
                            <li class="my-1"><a href="#" class="text-white">CMS</a></li>
                            <li class="my-1"><a href="#" class="text-white">Mobile</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">About</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">About Us</a></li>
                            <li class="my-1"><a href="#" class="text-white">Contact</a></li>
                            <li class="my-1"><a href="#" class="text-white">The team</a></li>
                            <li class="my-1"><a href="#" class="text-white">Careers</a></li>
                            <li class="my-1"><a href="#" class="text-white">Locate store</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">Help</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">Sponsors</a></li>
                            <li class="my-1"><a href="#" class="text-white">FAQs</a></li>
                            <li class="my-1"><a href="#" class="text-white">Stories & Ideas</a></li>
                        </ul>
                    </div>
                </div>

                <div class="mt-auto d-flex justify-content-between">
                    <span class="fs--3 fs-lg--2">&copy; Spyre, 2019 Webinning Ltd.</span>
                    <div class="fs--3 fs-lg--2"><a href="#" class="mr-1 text-white">Privacy Policy</a>|<a href="#" class="ml-1 text-white">Cookie Policy</a></div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- End of Footer -->


<!-- Core Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Vendor Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/rellax/rellax.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/typed.js/lib/typed.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/aos/dist/aos.js"></script>

<!-- Theme Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/dist/js/theme.min.js"></script>
</body>
</html>